<template>
  <div class="relative" style="display: inline-block">
    <div ref="cricleDom" style="width: 200px;height: 160px">
    </div>
    <div class="absolute bg_dust" v-if="type === 1" style='background: url("./static/images/company-dust.png")'></div>
    <div class="absolute bg_dust" v-else style='background: url("./static/images/company-noise.png")'></div>
    <div class="absolute rate">
      <i class="iconfont icon-jianyoushang safe" v-if="rateStatus > 0"></i>
      <i class="iconfont icon-jianyouxia warning" v-if="rateStatus < 0"></i>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'cricleChart',
    mounted () {
      if (this.type === 1) {
        this.initDust()
      } else {
        this.initNoise()
      }
    },
    watch: {
      rateValue () {
        if (this.type === 1) {
          this.initDust()
        } else {
          this.initNoise()
        }
      }
    },
    props: {
      rateValue: {
        type: Number,
        default: 1
      },
      rateStatus: {
        type: Number,
        default: 0
      },
      type: {
        default: 0,
        type: Number
      }
    },
    methods: {
      initDust () {
        let myChart = this.$echarts.init(this.$refs.cricleDom)
        let option = {
          background: 'transform',
          series: [
            {
              name: '百分比100%',
              type: 'gauge',
              // 起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
              center: ['50%', '50%'],
              // 仪表盘轴线相关配置。
              axisLine: {            // 坐标轴线
                show: false,
                lineStyle: {       // 属性lineStyle控制线条样式
                  width: 10,
                  color: [[1, '#0b3f5d']]
                }
              },
              // 分隔线样式。
              splitLine: {
                show: false
              },
              // 刻度样式
              axisTick: {
                show: false
              },
              // 刻度标签。
              axisLabel: {
                show: false
              },
              // 仪表盘指针。
              pointer: {
                show: false,
                // 指针长度
                length: '90%',
                width: 0
              },
              title: {
                offsetCenter: [0, '70%'],    // x, y，单位px
                color: '#a9c5ec'
              },
              data: [
                {name: '扬尘达标率', value: this.rateValue}
              ],
              detail: {
                formatter: (value) => {
                  return value + '%'
                },
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  color: '#fff',
                  fontSize: 24
                },
                offsetCenter: [-8, -3]
              },
              startAngle: 215,
              endAngle: -35,
              zlevel: 1
            },
            {
              startAngle: 215,
              endAngle: -35,
              name: '进度条',
              type: 'gauge',
              // 半径
              center: ['50%', '50%'],
              // 仪表盘轴线相关配置。
              axisLine: {            // 坐标轴线
                show: true,
                lineStyle: {       // 属性lineStyle控制线条样式
                  width: 10,
                  color: [[this.rateValue / 100, '#1FADFF']]
                }
              },
              // 分隔线样式。
              splitLine: {
                show: false,
                length: 10,
                lineStyle: {
                  color: 'white',
                  width: 3
                }
              },
              // 刻度样式
              axisTick: {
                show: false
              },
              // 刻度标签。
              axisLabel: {
                show: false
              },
              // 仪表盘指针。
              pointer: {
                // 这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
                show: false
              },
              // 仪表盘标题。
              title: {
                show: false
              },
              // 仪表盘详情，用于显示数据。
              detail: {
                show: false,
                offsetCenter: [0, '-10%'],
                formatter: '',
                textStyle: {
                  fontSize: 0
                }
              },
              data: [
                {name: '数量', value: this.rateValue}
              ],
              zlevel: 2
            }
          ]
        }
        myChart.setOption(option)
      },
      initNoise () {
        let myChart = this.$echarts.init(this.$refs.cricleDom)
        let option = {
          background: 'transform',
          series: [
            {
              name: '百分比100%',
              type: 'gauge',
              // 起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
              center: ['50%', '50%'],
              startAngle: 215,
              endAngle: -35,
              // 仪表盘轴线相关配置。
              axisLine: {            // 坐标轴线
                show: false,
                lineStyle: {       // 属性lineStyle控制线条样式
                  width: 10,
                  color: [[1, '#0b3f5d']]
                }
              },
              // 分隔线样式。
              splitLine: {
                show: false
              },
              // 刻度样式
              axisTick: {
                show: false
              },
              // 刻度标签。
              axisLabel: {
                show: false
              },
              // 仪表盘指针。
              pointer: {
                show: false,
                // 指针长度
                length: '90%',
                width: 0
              },
              title: {
                offsetCenter: [0, '70%'],    // x, y，单位px
                color: '#a9c5ec'
              },
              data: [
                {name: '噪音达标率', value: this.rateValue}
              ],
              detail: {
                formatter: (value) => {
                  return value + '%'
                },
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  color: '#fff',
                  fontSize: 24
                },
                offsetCenter: [-8, -3]
              },
              zlevel: 1
            },
            {
              name: '进度条',
              type: 'gauge',
              startAngle: 215,
              endAngle: -35,
              // 半径
              center: ['50%', '50%'],
              // 仪表盘轴线相关配置。
              axisLine: {            // 坐标轴线
                show: true,
                lineStyle: {       // 属性lineStyle控制线条样式
                  width: 10,
                  color: [[this.rateValue / 100, '#33CBDB']]
                }
              },
              // 分隔线样式。
              splitLine: {
                show: false,
                length: 10,
                lineStyle: {
                  color: 'white',
                  width: 3
                }
              },
              // 刻度样式
              axisTick: {
                show: false
              },
              // 刻度标签。
              axisLabel: {
                show: false
              },
              // 仪表盘指针。
              pointer: {
                // 这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
                show: false
              },
              // 仪表盘标题。
              title: {
                show: false
              },
              // 仪表盘详情，用于显示数据。
              detail: {
                show: false,
                offsetCenter: [0, '-10%'],
                formatter: '',
                textStyle: {
                  fontSize: 0
                }
              },
              data: [
                {name: '数量', value: 99}
              ],
              zlevel: 2
            }
          ]
        }
        myChart.setOption(option)
      }
    }
  }
</script>

<style scoped lang="scss">
  .bg_dust {
    width: 50px;
    height: 50px;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,-55%);
    z-index: -1;
  }

  .rate {
    top: 39%;
    left: 62%;
    .safe{
      color: #00FF56;
    }
    .warning{
      color: #E74646;
    }
  }

</style>
